<div class="notadd-upload-container" draggable="true">
    <div class="notadd-upload-preview" *ngFor="let url of fileUrls; let idx = index">
        <img [src]="url" *ngIf="(url | fileExtension) | isImageFile; else notImageFile"/>
        <ng-template #notImageFile>
            <div class="icon" [attr.content]="url | fileExtension">
                <svg width="100%" height="100%" viewBox="0 0 43 46">
                    <path d="M 36 23.29 c 0 0 0 11.43 0 11.43 c 0 1.26 -1.01 2.28 -2.25 2.28 c 0 0 -31.5 0 -31.5 0 c -1.24 0 -2.25 -1.02 -2.25 -2.28 c 0 0 0 -11.43 0 -11.43 c 0 -1.26 1.01 -2.29 2.25 -2.29 c 0 0 31.5 0 31.5 0 c 1.24 0 2.25 1.03 2.25 2.29 c 0 0 0 0 0 0 m -6.12 -18.5 c 0 0 0 8.37 0 8.37 c 0 0.53 0.43 0.96 0.96 0.96 c 0 0 8.6 0 8.6 0 c 0 0 -9.56 -9.33 -9.56 -9.33 m 13.12 12.21 c 0 0 0 25 0 25 c 0 2.21 -1.79 4 -4 4 c 0 0 -31 0 -31 0 c -2.21 0 -4 -1.79 -4 -4 c 0 0 0 -2 0 -2 c 0 0 3 0 3 0 c 0 0 0 2 0 2 c 0 0.56 0.45 1 1 1 c 0 0 31 0 31 0 c 0.55 0 1 -0.44 1 -1 c 0 0 0 -25 0 -25 c 0 0 -9.16 0 -9.16 0 c -2.12 0 -3.84 -1.71 -3.84 -3.84 c 0 0 0 -10.14 0 -10.14 c -0.06 0 -0.12 -0.02 -0.19 -0.02 c 0 0 -18.81 0 -18.81 0 c -0.55 0 -1 0.45 -1 1 c 0 0 0 14 0 14 c 0 0 -3 0 -3 0 c 0 0 0 -14 0 -14 c 0 -2.21 1.79 -4 4 -4 c 0 0 18.81 0 18.81 0 c 2.63 0 4 1.5 4 1.5 c 0 0 11.07 10.81 11.07 10.81 c 0 0 0.57 0.5 0.89 1.81 c 0 0 0.23 0 0.23 0 c 0 0 0 2.88 0 2.88 c 0 0 0 0 0 0"/>
                </svg>
            </div>
        </ng-template>
        <button mat-icon-button
                class="white"
                (click)="removeFile(idx)">
            <mat-icon class="mat-24">delete_forever</mat-icon>
        </button>
    </div>
    <div class="notadd-upload-select" [ngClass]="dragAreaClass" *ngIf="fileCount > fileUrls.length">
        <mat-icon class="notadd-upload-icon">add</mat-icon>
        <div class="notadd-upload-text">点击或拖拽图片<br>到此区域</div>
        <div class="notadd-upload-inner">
            <input type="file"
                   class="notadd-upload-input"
                   [accept]="accept"
                   [multiple]="(maxFiles > 1)"
                   (change)="onFileChange($event)">
        </div>
        <div *ngIf="isUploading" class="notadd-upload-loading">
            <mat-spinner color="accent" diameter="50"></mat-spinner>
        </div>
    </div>
</div>
<ul class="notadd-upload-errors">
    <li *ngFor="let error of errors">{{error}}</li>
</ul>
